@import '../../var.less';

.vcu-card {
  position        : relative;
  box-sizing      : border-box;
  color           : @card-text-color;
  font-size       : @card-font-size;
  background-color: @card-background-color;

  &--inset {
    margin       : @card-inset-padding;
    border-radius: @card-inset-border-radius;
  }

  &__header {
    padding : @card-padding;
    position: relative;

    &--line {
      &::after {
        content      : " ";
        position     : absolute;
        bottom       : 0;
        right        : 0;
        height       : 1px;
        border-bottom: 1px solid @card-header-border-color;
        left         : 15px;
      }
    }

    &--block {
      &>div.vcu-card__title {
        padding-left: 10px;
      }

      &::before {
        content         : " ";
        position        : absolute;
        top             : @padding-xs + 3;
        left            : 15px;
        width           : 3px;
        height          : 10px;
        background-color: @card-header-block-color;
      }
    }
  }

  &__title {
    font-size: @card-title-font-size;
    color    : @card-title-text-color;
    font-weight: 600;
  }

  &__content {
    padding: @card-padding;
  }

  &__footer {
    position: relative;
    padding : @card-padding;

    &::before {
      content      : " ";
      position     : absolute;
      top          : 0;
      right        : 0;
      height       : 1px;
      border-bottom: 1px solid @card-header-border-color;
      left         : 15px;
    }
  }
}